<script setup lang= 'ts'>
import type { SearchResult } from '@/services/type'
import { playlistApi } from '@/services/index' // 引入歌单接口
import { useMusicStore } from '@/store/listMusic' // 引入音乐 pinia 状态管理
import type { TrackItem, SingerItem } from '@/services/type'
import { computed, nextTick,watch } from 'vue'

const musicStore = useMusicStore() // 获取音乐 pinia 状态管理

interface Props {
  list: SearchResult[]
}


const props = defineProps<Props>()
console.log(props.list)

// 循环赋值,监听list变化,更新pinia状态管理
const objList = computed(() => {
  return props.list.map((item) => {
    return {
      id: item.id,
      name: item.name,
      al: {
        id: item.album.id,
        picUrl: item.album.artist.img1v1Url,
        name: item.album.name,
      },
      ar: item.artists.map((artist) => {
        return {
          id: artist.id,
          name: artist.name,
        }
      })
    }
  })
})

// 点击播放音乐,上传搜索歌单和当前歌曲到pinia状态管理
const goPlayMusic =(item:TrackItem)=>{
  musicStore.song = item // 设置当前播放音乐
  musicStore.songs = objList.value
  musicStore.isSong = true
  console.log(objList)
  uni.navigateTo({
    url: '/pages/player/player'
  })
}

console.log(objList)



</script>

<template>
  <view class="mark" v-if="objList.length === 0">
    <view>加载中。。。</view>
  </view>
  <view class="box" v-else>
    <view class="top">
      <uni-section title="搜索结果" type="line" />
    </view>
    <view class="search-result">
      <view class="item"
        v-for="(item, index) in objList"
        :key="item.id"
        @click="goPlayMusic(item)"
        >
        <view class="item-left">
          <image class="item-img" :src="item.al.picUrl" />
        </view>
        <view class="item-right">
          <view>{{ item.name }}</view>
          <view>专辑：{{ item.al.name }}</view>
          <view>歌手：{{ item.ar[0].name }}</view>
        </view>
      </view>
    </view>
  </view>
  
  
</template>

<style scoped scss>
.mark {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: rgb(170, 170, 170); 
}
.box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .top {
    height: 80rpx;
  }
  .search-result {
    flex: 1;
    background-color: rgb(221, 223, 223);
  }
}
.item {
  display: flex;
  margin-bottom: 20rpx;
  background-color: rgb(221, 237, 253);
}

.item-left {
  width: 200rpx;
  height: 200rpx;
}

.item-img {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.item-right {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}


.uni-section ::v-deep  .uni-section-header__decoration{
  background-color: rgb(80, 61, 225);
}
</style>
